<template>
    <div class="content-right" @click="ensureBlur">
        <input type="text" ref="searchInput" v-model="searchText" :class="{paddRight:paddRight}" v-on:focus="clearPlaceholder" v-on:keyup.enter="returnInputValue" v-on:input="showDelBtn" v-on:blur="hideDelBtn" :placeholder="text">
        <i class="fa fa-times-circle delBtn" :class="{hide:YesShow}" aria-hidden="true" @click="delText"></i>
        <span :class="{ieMask:isIe9}"></span>
        <button @click="returnInputValue">搜!</button>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                // wid:'33.333%'
                red:'me',
                searchText:'',
                YesShow:true,
                timeout:null,
                placeholderSupportYes:null,
                paddRight:true,
                isIe9:false,
            }
        },
        components:{

        },
        computed:{

		},
        methods:{
            returnInputValue:function(){
                var self = this;
                this.$emit('getValue',self.searchText);
            },
            isIE:function(){
                if (window.navigator.userAgent.indexOf("MSIE")>=1 ) //|| window.navigator.userAgent.indexOf('Trident')
                return true; 
                else
                return false; 
            },
            isIE9:function(){
                if (window.navigator.appName === "Microsoft Internet Explorer" && navigator.appVersion.split(';')[1].replace(/[ ]/g,"")==="MSIE9.0" )
                return true; 
                else
                return false; 
            },
            placeholderSupport:function(){
                return "placeholder" in document.createElement('input');
            },
            delText:function(e){
                // e.preventDefault();
                this.searchText = null;
                this.$refs.searchInput.focus();
            },
            showDelBtn:function(){
                // if (this.isIE()){return}
                this.YesShow = false;
                console.log('inputevent');
            },
            hideDelBtn:function(){
                var self = this;
                // if (this.isIE()){
                    if (!self.placeholderSupportYes) {
                            if (self.searchText === '') {
                                self.searchText = self.text;
                            }
                            console.log('focus');
                    } 
                    // return
                // }
                
                this.timeout = setTimeout(function(){
                    self.YesShow = true;

                    console.log('blur');
                },200)
            },
            ensureBlur:function(e){
                // if (this.isIE()){return}
                var target = e.target || e.srcElement;
                if (target.className.indexOf('delBtn') !== -1 ) {
                    window.clearTimeout(this.timeout);
                    this.timeout = null;
                    this.$refs.searchInput.focus();
                }
                if ( target.className.indexOf('ieMask') !== -1) {
                    this.searchText = null;
                    this.$refs.searchInput.focus();
                }
            },
            clearPlaceholder:function(){
               if (!this.placeholderSupportYes) {
                    if (this.searchText === this.text) {
                        this.searchText = ''
                    }
                    console.log('focus');
               }
               
               if (this.searchText) {
                    this.showDelBtn();
               }          
            },
            clear:function(){
                this.searchText = '';
            }

        },
        props:{
            text:{
                type:String,
                default:'请输入姓名、拼音、邮箱、号码'
            }
        },
        mounted:function(){
            this.placeholderSupportYes = this.placeholderSupport();
            if (this.isIE9()) {
                this.isIe9 = true;
            }
            if (!this.placeholderSupportYes) {
                this.searchText = this.text;
                this.paddRight = false;
            }
        }
    }
</script>
<style scoped>
    .content-right{
        position: relative;
    }
    .content-right .delBtn{
        position: absolute;
        top: 8px;
        left: 186px;
        color:rgba(0, 0, 0, 0.2);
    }
    .content-right .hide{
        display:none;
    }    
    .content-right input{
        height: 28px;
        line-height: 28px;
        border-radius:25px 0 0 25px;
        border:1px solid #EFEFEF;
        padding-left:15px;
        padding-right:20px;
        /*float:left;*/
        outline:none;  
        color:#9999A5;
        width:170px;
        
    }
    .content-right .ieMask{
        position: absolute;
        width:22px;
        height:28px;
        background-color: #fff;
        top:3px;
        z-index:200;
        left:164px;
    }
    .content-right button{
        height:32px;
        border-radius: 0px 25px 25px 0px;
        margin-left:-6px;
        border:1px solid #EFEFEF;    
        width:44px;
        color:#93A2B2;
        padding:12px;
        line-height:7px;
        background:#F4F4F4;
        outline:none;
    }
</style>
<style>
 /*::-ms-clear,::-ms-reveal{display:none !important;}*/
</style>




